<script setup lang="ts">
import { useUserStore } from "@/store/modules/user";
import { computed, ref } from "vue";
import { hidePhone } from "@/utils/function";
import { yuyue } from "@/common/svg";
import { onShow } from "@dcloudio/uni-app";

onShow(()=>{
  uni.showTabBar();
})

const userStore = useUserStore();
const phone = computed(() => {
  if (!userStore.getUser?.phone) return "";
  return hidePhone(userStore.getUser.phone);
});
userStore.getLoginCode()
const loginVisible = ref<boolean>(false);

const handleLogin = () => {
  if (userStore.getToken && false) {
    uni.navigateTo({
      url: "/pages/user/userinfo",
    });
  } else {
    uni.navigateTo({
      url: "/pages/login/login",
    });
  }
};
const handleLoginOut = () => {
  userStore.loginOut();
  uni.showToast({
    title: "退出成功",
    icon: "none",
    duration: 1000,
  });
};
const handleUserInfo = () => {
  uni.navigateTo({
    url: "/pages/user/userinfo",
  });
};

const handleDigital = () => {
  uni.navigateTo({
    url: "/pages/digital/digital",
  });
};

const handleGoMybooking=()=>{
  uni.navigateTo({
    url: "/pages/user/mybooking/mybooking",
  });
}

</script>

<template>
  <div class="user">
    <section class="user-header">
      <div class="user-header-avatar" @click="handleLogin">
        <xavatar size="60" :url="userStore.getUser?.headImgUrl" />
      </div>
      <div @click="handleUserInfo" class="user-header-infos" v-if="userStore.getToken">
        <div class="user-header-title">
          <span class="name"> {{ userStore.getUser?.nickName }}</span>
        </div>
        <div class="user-header-body">
          <span class="phone">
            <i class="iconfont icon icon-shouji"></i> {{ phone }}</span
          >
        </div>
      </div>
      <div class="user-header-infos" v-else>
        <!-- #ifdef MP-WEIXIN  -->
        <LoginPhoneButton>
          <div class="user-header-nologin">暂未登录，点击登录</div>
        </LoginPhoneButton>
        <!-- #endif -->
        <!-- #ifdef H5  -->
        <div @click="handleLogin" class="user-header-nologin">暂未登录，点击登录</div>

        <Popuplogin v-if="loginVisible" v-model="loginVisible" />
        <!-- #endif -->
      </div>
    </section>
    <!-- <section class="user-card">
      <div class="szrInfo user-card-body" @click="handleDigital">
        <div class="txt">
          <svgicon :size="30" class="svgicon" :url="yuyue" />
          五一预约
        </div>
        <div class="icon">
          <i class="iconfont icon-you"></i>
        </div>
      </div>
    </section> -->
    <section class="user-card">
      <div class="user-card-dt">常用功能</div>
      <div class="commonTabs">
        <uni-grid :column="4" :showBorder="false" :square="false">
          <uni-grid-item>
            <div class="commonTabs-item" @click="handleGoMybooking">
              <div class="icon">
                <svgicon :size="30" :url="yuyue" />
              </div>
              <div class="text">我的预约</div>
            </div>
          </uni-grid-item>
          <uni-grid-item>
            <div class="commonTabs-item">
              <div class="icon">
                <svgicon :size="30" :url="yuyue" />
              </div>
              <div class="text">常用联系人</div>
            </div>
          </uni-grid-item>
   
        </uni-grid>
      </div>
    </section>
    <section class="user-card">
      <div class="user-card-dt">快捷操作</div>
      <uni-list>
        <uni-list-item
          clickable
          @tap="handleUserInfo"
          title="个人信息"
          showArrow
        ></uni-list-item>
        <uni-list-item
          clickable
          v-if="userStore.getToken"
          title="退出登录"
          @tap="handleLoginOut"
          showArrow
        ></uni-list-item>
      </uni-list>
    </section>
  </div>
</template>

<style lang="scss" scoped>
.user {
  min-height: 100%;
  background-color: #f5f5f5;
  &-header {
    padding: 15px;

    display: flex;
    align-items: center;
    background-color: $base;
    &-infos {
      flex: 1;
      width: 0;
      margin-left: 20px;
    }
    &-title {
      color: #fff;
      .name {
        font-size: 17px;
      }
    }
    &-body {
      margin-top: 6px;
    }
    .phone {
      font-size: 12px;
      background-color: #8c8c8c;
      background-image: linear-gradient(to right, #868686, #adadad, #868686);
      border-radius: 10px;
      padding: 2px 10px;
      padding-left: 30px;
      color: #fff;
      position: relative;
      height: 20px;
      .icon {
        position: absolute;
        width: 26px;
        height: 26px;
        left: 0;
        top: -3px;
        background-color: #888;
        color: #fff;
        text-align: center;
        line-height: 26px;
        font-size: 18px;
        border-radius: 50%;
        box-shadow: 0 0 5px #999;
      }
    }
    &-nologin {
      color: #fff;
      text-align: left;
    }
  }
}

.user-card {
  margin: 4vw;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;

  &-dt {
    color: #111;
    font-size: 15px;
    font-weight: 500;

    padding: 4vw;
  }
  &-body {
    padding: 4vw;
  }
}

.szrInfo {
  display: flex;
  align-items: center;
  .txt {
    flex: 1;
    font-size: 14px;
    color: #222;
    display: flex;
    align-items: center;
    .svgicon {
      width: 25px;
      height: 25px;
      margin-right: 8px;
    }
  }
  .icon {
    color: #999;
  }
}
.commonTabs {
  &-item {
    text-align: center;
    padding-bottom: 10px;
    .icon {
      height: 30px;
      padding: 5px 0;
    }
    .text {
      font-size: 12px;
      color: #333;
      margin-top: 10px;
    }
  }
}
</style>
